<template>
  <div class="home">
      <div class="home-body">
           <h4 class="title">后台管理系统</h4>
           <p class="des">在线</p>
           <el-button @click="learn">进入学习</el-button>
      </div>
  </div>
</template>

<script lang='ts'>
//是一个装饰器功能
import {Component,Vue} from 'vue-property-decorator'
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

@Component({
  components:{
     HelloWorld
  },
})
export default class Home extends Vue{
  learn():void{
    //新窗口打开 
     window.open('https://study.163.com/course/courseLearn.htm?courseId=1209433911#/learn/video?lessonId=1279470749&courseId=1209433911','_blank')
  }
 
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: 100% 100%;
  .home-body {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    padding: 100px;
    box-sizing: border-box;
    .title {
      font-size: 32px;
      font-weight: bold;
      line-height: 60px;
    }
    .des {
      font-size: 18px;
      margin: 40px 0;
    }
  }
}
</style>
